
<template>
    <div class="dcol top">
        <div class="drow top_content" style="height: 100px;">
            <div style="width: 110px;height: 40px;background-color: #f92525;color: #fff;text-align: center;line-height: 40px;font-size: 13px;">LOGO</div>
            <div class="drow" style="align-items: center;">
                <div style="width: 16px;height: 17px;margin-right: 21px;">
                    <img src="../src/assets/setting.png" style="width: 100%;height: 100%;" />
                </div>
                <div style="width: 16px;height: 17px;margin-right: 40px;">
                    <img src="../src/assets/fill.png" style="width: 100%;height: 100%;" />
                </div>
                <div style="width: 110px;height: 40px;background-color: #f92525;color: #fff;text-align: center;line-height: 40px;font-size: 13px;">Log Out</div>
            </div>
        </div>
        <div class="dcol top" style="background-color: #f5f8f9;padding-bottom: 54px;">
            <div class="full_content" style="margin-top: 70px;">
                <div class="drow" style="width:100%;justify-content: space-between;align-items: center;">
                    <div class="dcol">
                        <div style="font-size: 30px;color: #262B2E;font-weight: 400;">Audience Overview</div>
                        <div style="font-size: 15px;color: #262B2E;font-weight: 400;opacity: 0.7;">Roseville, CA</div>
                    </div>
                    <div class="drow">
                        <div class="card_magin active">Dashboard</div>
                        <div class="card_magin">Projects</div>
                        <div class="card_magin">Calendar</div>
                        <div class="card_magin">mailbox</div>
                        <div class="card_magin">settings</div>
                    </div>
                </div>
                <!-- <image style="display: block;height:200px;width: 200px;" src="../src/assets/lb.png"></image> -->
                <div class="drow" style="margin-top: 50px;justify-content: space-between;">
                    <div class="carousel1">
                        <el-carousel :autoplay="false" height="268px">
                            <el-carousel-item v-for="(item,key) in plist" :key="key" style="height: 100%;width: 100%;">
                                <el-image style="width: 100%; height: 100%" :src="item.img" />
                                <!-- <img style="width: 100%; height: 100%" :src="item.img" /> -->
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="carousel2">
                        <div class="drow" style="margin: 40px 50px 0px 50px;justify-content: space-between;">
                            <div style="font-size: 18px;font-weight: 400;color: #262B2E;">Support Requests</div>
                            <div class="viewall">
                                View All
                            </div>
                        </div>
                        <div style="width: 100%;height: 1px;background-color: #efeff0;margin:30px 0 27px;"></div>
                        <div class="c-txt" style="margin: 0px 50px 30px 50px;">
                            <div class="drow" style="justify-content: space-between;">
                                <div class="drow">
                                    <div style="width:100px;">TIME</div>
                                    <div>USER NAME</div>
                                </div>
                                <div>
                                    STATUS
                                </div>
                            </div>
                            <div style="margin-top: 28px;">
                                <div class="drow" style="justify-content: space-between;">
                                    <div class="drow">
                                        <div style="width: 100px;">
                                            9:45pm
                                        </div>
                                        <div>info@design.com</div>
                                    </div>
                                    <div class="slove-btn">
                                        Solved
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top: 28px;">
                                <div class="drow" style="justify-content: space-between;">
                                    <div class="drow">
                                        <div style="width: 100px;">
                                            9:45pm
                                        </div>
                                        <div>info@design.com</div>
                                    </div>
                                    <div class="slove-btn">
                                        Solved
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dcol" style="margin-top: 20px;height: 350px;background-color: #fff;align-items: center;">
                    <div style="margin-top: 34px;">
                        <div style="font-size: 20px;font-weight: 500;color: #262B2E;">曲线图数据展示</div>
                    </div>
                    <div id="main" style="width: 1065px;height: 250px;"></div>
                </div>
                <div class="drow" style="margin-top: 20px;height: 377px;justify-content: space-between;">
                    <div class="drow" style="width: 560px;height: 100%;background-color: #fff;justify-content: center;align-items: center;">
                        <div id="main1" style="width: 340px;height: 340px;">

                        </div>
                    </div>
                    <div class="drow" style="width: 560px;height: 100%;background-color: #fff;justify-content: center;align-items: center;">
                        <div id="main2" style="width: 340px;height: 340px;">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dcol" style="background-color: #202124;width: 100%;height: 290px;align-items: center;">
            <div class="top_content" style="margin-top: 80px;">
                <div class="drow foot_text" style="justify-content: space-around;width: 100%;">
                    <div style="width: 110px;height: 40px;background-color: #f92525;color: #fff;text-align: center;line-height: 40px;font-size: 13px;">LOGO</div>
                    <div class="dcol">
                        <div>news</div>
                        <div>channels</div>
                        <div>overview</div>
                        <div>timeline</div>
                    </div>
                    <div class="dcol">
                        <div>Sport</div>
                        <div>Culture</div>
                        <div>Nature</div>
                        <div>Music</div>
                    </div>
                    <div class="dcol">
                        <div>weather</div>
                        <div>autos</div>
                        <div>local</div>
                        <div>shop</div>
                    </div>
                    <div class="dcol">
                        <div>future</div>
                        <div>food</div>
                        <div>earth</div>
                        <div>tv</div>
                    </div>
                    <div class="dcol">
                        <div>travel</div>
                        <div>radio</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import axios from "axios";
    import { ref,onMounted,getCurrentInstance } from 'vue'
    import * as echarts from 'echarts';
    var plist = ref([{img:"../src/assets/lb.png"},{img:"../src/assets/lb.png"},{img:"../src/assets/lb.png"}])
    
    
    function loadingEachart(data){
        var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                xAxis: {
                    name:"日期",
                    type: 'category',
                    axisLabel:{
                        interval:1,
                        show:true,
                        showMinLabel:true,
                        showMaxLabel:true
                    },
                    axisTick:{
                        alignWithLabel:true,
                    },
                    data: data.xAxis || []
                },
                yAxis: {
                    type: 'value',
                    min:0,
                    max:10000,
                    boundaryGap: false,
                    axisLabel:{
                        formatter:'{value} 人'
                    }
                },
                series: [
                    {
                        data: data.series,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            });
    }

    onMounted(()=>{
        axios.get("https://edu.telking.com/api/?type=month").then(res=>{
            console.log(res)
            if(res.data.code == 200) {
                loadingEachart(res.data.data)
            }
        })


        
    
    
        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption({
            title: {
                text: '饼状图数据展示',
                left: 'center'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        })
    
        
        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption({
            title: {
                text: '柱状图数据展示',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
                }
            ]
            })
    });
</script>

<style scoped>

.top{
    width: 100%;
    background-color: #fff;
    align-items: center;
}

.top_content {
    min-width: 1140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.full_content {
    min-width: 1140px;
    width: 1140px;
}
.card_magin{
    font-size: 13px;
    font-weight: bold;
    color: #262B2E;
    margin-left: 30px;
}
.active{
    position: relative;
}
.active::after{
    position: absolute;
    content: "";
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #262B2E;
    opacity: 0.2;
}
.carousel1{
    background-color: #fff;
    width: 560px;
    height: 288px;
    box-sizing:border-box;
    padding: 10px;
}
.carousel2{
    background-color: #fff;
    width: 560px;
    height: 288px;
}
.viewall {
    width: 95px;
    height: 40px;
    border: 2px solid #e9e9ea;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #262B2E;
    line-height: 40px;
    opacity: 0.7;
    text-align: center;
}
.c-txt{
    font-size: 14px;
    font-weight: bold;
    color: #262B2E;
}

.slove-btn {
    width: 65px;
    height: 30px;
    background: #5DD054;
    border-radius: 2px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
}
.foot_text{
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 28px;
}
</style>
